<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="68px">
      <el-form-item label="线路状态" prop="busLineStatus">
        <el-select v-model="queryParams.busLineStatus" placeholder="请选择线路状态" clearable>
          <el-option
            v-for="dict in dict.type.bhxq_bus_line_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="线路编号" prop="busLineCode">
        <el-input
          v-model="queryParams.busLineCode"
          placeholder="请输入线路编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="线路名称" prop="busLineName">
        <el-input
          v-model="queryParams.busLineName"
          placeholder="请输入线路名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['bhxq:busLine:add']"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="busLineList" @selection-change="handleSelectionChange">
      <el-table-column label="线路名称" align="center" prop="busLineName" />
      <el-table-column label="线路编号" align="center" prop="busLineCode" />
      <el-table-column label="线路状态" align="center" prop="busLineStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.bhxq_bus_line_status" :value="scope.row.busLineStatus" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDetail(scope.row)"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpDown({data: scope.row, upDown: '1'})"
          >上行</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpDown({data: scope.row, upDown: '0'})"
          >下行</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改公交线路对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="54%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="线路名称" prop="busLineName">
              <el-input v-model="form.busLineName" :disabled="disabledon" placeholder="请输入线路名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="线路编号" prop="busLineCode">
              <el-input v-model="form.busLineCode" :disabled="disabledon" placeholder="请输入线路编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="线路开通日期" prop="busLineOpendate">
              <el-date-picker
                v-model="form.busLineOpendate"
                :disabled="disabledon"
                clearable
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择线路开通日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="运营区域" prop="busLineOperatingarea">
              <el-input v-model="form.busLineOperatingarea" :disabled="disabledon" placeholder="请输入运营区域" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经营方式" prop="busLineOperatingmode">
              <el-input v-model="form.busLineOperatingmode" :disabled="disabledon" placeholder="请输入经营方式" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="线路长度" prop="busLineLength">
<!--              <el-input v-model="form.busLineLength" onkeyup="value=value.replace(/[^\d]/g, '')" :disabled="disabledon" placeholder="请输入线路长度" />-->
              <el-input class="delInput" v-model.number="form.busLineLength" type="number" oninput="if(value.length>10)value=value.slice(0,10)" placeholder="请输入线路长度"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="线路状态" prop="busLineStatus">
              <el-select v-model="form.busLineStatus" :disabled="disabledon" style="width: 100%" placeholder="请选择线路状态">
                <el-option
                  v-for="dict in dict.type.bhxq_bus_line_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="非直线系数" prop="busLineNonlinearcoefficient">
              <el-input v-model="form.busLineNonlinearcoefficient" :disabled="disabledon" placeholder="请输入非直线系数" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运营类型" prop="busLineOperatingtype">
              <el-select v-model="form.busLineOperatingtype" :disabled="disabledon" style="width: 100%" placeholder="请选择运营类型">
                <el-option
                  v-for="dict in dict.type.bhxq_bus_line_operation_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="运营线路类型" prop="busLineOperatinglinetype">
              <el-select v-model="form.busLineOperatinglinetype" :disabled="disabledon" style="width: 100%" placeholder="请选择运营线路类型">
                <el-option
                  v-for="dict in dict.type.bhxq_bus_line_operation_line_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单程时间" prop="busLineOnewaytime">
              <el-input v-model="form.busLineOnewaytime" :disabled="disabledon" placeholder="请输入单程时间" />
              <!--              <el-date-picker-->
              <!--                v-model="form.busLineOnewaytime"-->
              <!--                :disabled="disabledon"-->
              <!--                clearable-->
              <!--                type="date"-->
              <!--                value-format="yyyy-MM-dd"-->
              <!--                placeholder="请选择单程时间"-->
              <!--                style="width: 100%"-->
              <!--              />-->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配班数" prop="busLineShiftarrangementnum">
              <el-input-number v-model="form.busLineShiftarrangementnum" :disabled="disabledon" :precision="0" :step="1" size="small" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="高峰间隔" prop="busLinePeakinterval">
              <el-input v-model="form.busLinePeakinterval" :disabled="disabledon" placeholder="请输入高峰间隔" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="平峰间隔" prop="busLinePeaktopeakinterval">
              <el-input v-model="form.busLinePeaktopeakinterval" :disabled="disabledon" placeholder="请输入平峰间隔" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配车数" prop="busLineVehiclenum">
              <el-input-number v-model="form.busLineVehiclenum" :disabled="disabledon" :precision="0" :step="1" size="small" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="首班发车时间" prop="busLineFirstdeparturetime">
              <el-time-picker
                v-model="form.busLineFirstdeparturetime"
                :disabled="disabledon"
                placeholder="请选择首班发车时间"
                value-format="HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="末班发车时间" prop="busLineEnddeparturetime">
              <el-time-picker
                v-model="form.busLineEnddeparturetime"
                :disabled="disabledon"
                placeholder="请选择末班发车时间"
                value-format="HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="票价" prop="busLineFare">
              <el-input v-model="form.busLineFare" :disabled="disabledon" placeholder="请输入票价" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="!disabledon" type="primary" @click="submitForm">确 定</el-button>
        <el-button v-if="!disabledon && title !== '修改线路'" type="primary" @click="submitForm('ContinueFill')">确定并继续填写</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 配置上下行线路站点对话框 -->
    <el-dialog :title="upDowntitle" :visible.sync="upDownDialog" width="54%" append-to-body>
      <el-form label-width="110px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="请选择站点" prop="allSites">
              <el-select v-model="allSites" placeholder="请选择站点" clearable filterable @change="siteChange">
                <el-option
                  v-for="dict in siteList"
                  :key="dict.id"
                  :label="dict.stationName"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" size="medium" @click="joinList">加入列表</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-table :data="stationList">
              <el-table-column label="序号" type="index" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="站点名称" align="center" prop="stationName" />
              <el-table-column label="上下行" align="center" prop="upDown">
                <template>
<!--                  <span>{{ scope.row.upDown == '0' ? '下行' : '下行' }}</span>-->
                  <span>{{ upDowntitle == '配置上行线路站点' ? '上行' : '下行' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    :disabled="scope.$index === 0"
                    @click="moveUp(scope.row, scope.$index)"
                  >上移</el-button>
                  <!-- 这里分别展示了判断是否上移下移的两种方案 -->
                  <el-button
                    type="text"
                    size="small"
                    :disabled="getFormLength(scope.$index)"
                    @click="moveDown(scope.row, scope.$index)"
                  >下移</el-button>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="stationDel(scope.row, scope.$index)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitstation">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { listBusLine, getBusLine, delBusLine, addBusLine, updateBusLine } from '@/api/bhxq/busLine'

import {
  addBusLine,
  bindStation,
  delBusLine,
  getBusLine,
  listAllSite,
  listBusLine, stationDetail,
  updateBusLine
} from '@/api/informationReport'
import { delProblem } from '@/api/problemFeedback'

export default {
  name: 'Index',
  dicts: ['bhxq_bus_line_operation_line_type', 'bhxq_bus_line_operation_type', 'bhxq_bus_line_status'],
  data() {
    return {
      // 配置上下行列表数据
      stationList: [],
      // 站点
      allSites: '',
      // 全部站点字典
      siteList: [],
      disabledon: true,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 公交线路表格数据
      busLineList: [{}],
      // 弹出层标题
      title: '',
      // 配置上下行弹出层标题
      upDowntitle: '',
      // 是否显示弹出层
      open: false,
      // 上下行显示弹出层
      upDownDialog: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        busLineName: null,
        busLineCode: null,
        busLineStatus: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        busLineName: [
          { required: true, message: '线路名称不能为空', trigger: 'blur' }
        ],
        busLineCode: [
          { required: true, message: '线路编号不能为空', trigger: 'blur' }
        ],
        busLineOpendate: [
          { required: true, message: '线路开通日期不能为空', trigger: 'blur' }
        ],
        busLineOperatingarea: [
          { required: true, message: '运营区域不能为空', trigger: 'blur' }
        ],
        busLineOperatingmode: [
          { required: true, message: '经营方式不能为空', trigger: 'blur' }
        ],
        busLineLength: [
          { required: true, message: '线路长度不能为空', trigger: 'blur' }
        ],
        busLineNonlinearcoefficient: [
          { required: true, message: '非直线系数不能为空', trigger: 'blur' }
        ],
        busLineStatus: [
          { required: true, message: '线路状态不能为空', trigger: 'change' }
        ]
        // busLineOperatingtype: [
        //   { required: true, message: '运营类型不能为空', trigger: 'change' }
        // ],
        // busLineOperatinglinetype: [
        //   { required: true, message: '运营线路类型不能为空', trigger: 'change' }
        // ],
        // busLineOnewaytime: [
        //   { required: true, message: '单程时间不能为空', trigger: 'blur' }
        // ],
        // busLineVehiclenum: [
        //   { required: true, message: '配车数不能为空', trigger: 'blur' }
        // ],
        // busLineShiftarrangementnum: [
        //   { required: true, message: '配班数不能为空', trigger: 'blur' }
        // ],
        // busLinePeakinterval: [
        //   { required: true, message: '高峰间隔不能为空', trigger: 'blur' }
        // ],
        // busLinePeaktopeakinterval: [
        //   { required: true, message: '平峰间隔不能为空', trigger: 'blur' }
        // ],
        // busLineFare: [
        //   { required: true, message: '票价不能为空', trigger: 'blur' }
        // ],
        // busLineFirstdeparturetime: [
        //   { required: true, message: '首班发车时间不能为空', trigger: 'blur' }
        // ],
        // busLineEnddeparturetime: [
        //   { required: true, message: '末班发车时间不能为空', trigger: 'blur' }
        // ]
      },
      indexId: '', // 根据id获取站点索引位置
      id: '', // 存所选站点id
      data: undefined
    }
  },
  created() {
    this.getList()
    this.getAllSite()
  },
  methods: {
    /** 选择站点按钮操作 */
    siteChange(row) {
      // 获取所选站点数据的索引位置
      const index = this.siteList.findIndex(item => item.id == row)
      this.indexId = index
      this.id = row
    },
    /** 加入列表按钮操作 */
    joinList() {
      if (this.allSites !== '') {
        // 根据id查找重复站点
        const item = this.stationList.find(id => { return id.id === this.id })
        // 列表中没有所选站点，加入到列表中
        if (item === undefined) {
          this.stationList.push(this.siteList[this.indexId])
          this.allSites = ''
        } else if (item !== undefined) {
          // 列表中有所选站点，站点重复提示
          if (item.id === this.siteList[this.indexId].id) {
            this.$message.error('站点重复')
          }
        }
      } else if (this.allSites == '') {
        this.$message.error('请选择需要加入的站点')
      }
    },
    /** 上下行按钮操作 */
    handleUpDown(row) {
      this.allSites = ''
      const data = {
        busLineId: row.data.id,
        upDown: row.upDown
      }
      this.data = data
      stationDetail(data).then(response => {
        if (response.code === 200) {
          this.stationList = response.data.stationList
          this.upDowntitle = row.upDown === '1' ? '配置上行线路站点' : '配置下行线路站点'
          this.upDownDialog = true
        }
      })
    },
    // 上移
    moveUp(item, index) {
      this.stationList.splice(index - 1, 0, item) // 定位到点击位置的上一行，0即不删除如何元素，在此位置插入item
      this.stationList.splice(index + 1, 1) // 此时数组中有重复元素，把原来被挤下去的元素删除
      // this.moveUpdateSort(this.tableList);//更新数组对象到后端
    },
    // 下移
    moveDown(item, index) {
      console.log(index)
      this.stationList.splice(index + 2, 0, item)
      this.stationList.splice(index, 1)
      // this.moveUpdateSort(this.tableList);//更新数组对象到后端
    },
    // 删除站点
    stationDel(item, index) {
      console.log('-----', item, index)
      this.$modal.confirm('是否确认删除此数据项？').then(function() {
      }).then(() => {
        this.stationList.splice(index, 1)
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {})
    },
    // 控制下移按钮的显示于隐藏
    getFormLength(index) {
      if (index === this.stationList.length - 1) return true
      else {
        return false
      }
    },
    submitstation() {
      console.log('data', this.data)
      const data = {
        busLineId: this.data.busLineId,
        upDown: this.data.upDown,
        stationList: this.stationList
      }
      console.log('datadata2', data)
      bindStation(data).then(response => {
        if (response.code === 200) {
          this.allSites = ''
          this.upDownDialog = false
          this.$message.success('提交成功')
        }
      })
    },
    /** 查询公交线路列表 */
    getList() {
      this.loading = true
      listBusLine(this.queryParams).then(response => {
        console.log('response.rows', response.rows)
        this.busLineList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 获取全部站点 */
    getAllSite() {
      listAllSite().then(response => {
        this.siteList = response.data
      })
    },
    // 取消按钮
    cancel() {
      this.allSites = ''
      this.upDownDialog = false
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        // id: null,
        busLineName: null,
        busLineCode: null,
        busLineOpendate: null,
        busLineOperatingarea: null,
        busLineOperatingmode: null,
        // busLineStartsite: null,
        // busLineEndsite: null,
        busLineLength: null,
        busLineNonlinearcoefficient: null,
        // bhxqBusTeamid: null,
        // busLineStatus: null,
        busLineOperatingtype: null,
        busLineOperatinglinetype: null,
        // busLineBustype: null,
        busLineOnewaytime: null,
        busLineVehiclenum: null,
        busLineShiftarrangementnum: null,
        busLinePeakinterval: null,
        busLinePeaktopeakinterval: null,
        busLineFare: null,
        busLineFirstdeparturetime: null,
        busLineEnddeparturetime: null
        // busLineStartsitoffrunningtime: null,
        // busLineEndsitoffrunningtime: null,
        // busLineType: null,
        // createBy: null,
        // createTime: null,
        // updateBy: null,
        // updateTime: null,
        // delFlag: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.disabledon = false
      this.open = true
      this.title = '新增线路'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getBusLine(id).then(response => {
        this.form = response.data
        // if (this.form.busLineOperatinglinetype !== null) {
        //   this.form.busLineOperatinglinetype = Number(response.data.busLineOperatinglinetype)
        // }
        // if (this.form.busLineOperatingtype !== null) {
        //   this.form.busLineOperatingtype = Number(response.data.busLineOperatingtype)
        // }
        // if (this.form.busLineStatus !== null) {
        //   this.form.busLineStatus = Number(response.data.busLineStatus)
        // }
        this.disabledon = false
        this.open = true
        this.title = '修改线路'
      })
    },
    /** 提交按钮 */
    submitForm(type) {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateBusLine(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addBusLine(this.form).then(response => {
              console.log('form', this.form)
              this.$modal.msgSuccess('新增成功')
              // 当点击确认确定并继续填写时 模态框不关闭
              if (type === 'ContinueFill') {
                this.reset()
                this.open = true
              } else {
                this.open = false
              }
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除公交线路为"' + row.busLineName + '"的数据项？').then(function() {
        return delBusLine(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('bhxq/busLine/export', {
        ...this.queryParams
      }, `busLine_${new Date().getTime()}.xlsx`)
    },
    /** 查看按钮操作 */
    handleDetail(row) {
      this.reset()
      const id = row.id || this.ids
      getBusLine(id).then(response => {
        this.form = response.data
        // if (this.form.busLineOperatinglinetype !== null) {
        //   this.form.busLineOperatinglinetype = Number(response.data.busLineOperatinglinetype)
        // }
        // if (this.form.busLineOperatingtype !== null) {
        //   this.form.busLineOperatingtype = Number(response.data.busLineOperatingtype)
        // }
        // if (this.form.busLineStatus !== null) {
        //   this.form.busLineStatus = Number(response.data.busLineStatus)
        // }
        this.disabledon = true
        this.open = true
        this.title = '查看线路'
      })
    }
  }
}
</script>
<style scoped>
.el-checkbox__input.is-disabled + .el-checkbox__label {
  color: #606266 !important;
}

.el-checkbox__input.is-disabled.is-checked + .el-checkbox__label {
  color: #606266 !important;
}

.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after {
  border-color: #606266 !important;
}

.el-radio__input.is-disabled + span.el-radio__label {
  color: #606266 !important;
}

.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  background-color: #606266 !important;
}

.el-radio__input.is-disabled .el-radio__inner, .el-radio__input.is-disabled.is-checked .el-radio__inner {
  border-color: #606266 !important;
}

.el-input.is-disabled .el-input__inner, textarea:disabled {
  color: #606266 !important;
}

.el-range-editor.is-disabled input {
  color: #606266 !important;
}
.el-tooltip__popper{

  max-width:20%;

}

.el-tooltip__popper,.el-tooltip__popper.is-dark{

  background:rgb(48, 65, 86) !important;

  color: #fff !important;

  line-height: 24px;

}
 /deep/.delInput input::-webkit-outer-spin-button,
 /deep/.delInput input::-webkit-inner-spin-button {
   -webkit-appearance: none!important;
 }
/deep/.delInput input[type="number"]{
  -moz-appearance: textfield;
}
/deep/.delInput .el-input__inner{
  line-height: 1px !important;
}

</style>
